<template>
  <div class="box">
    <el-form size="medium"  ref="expressForm" :model="order" :rules="itemRules" label-width="100px">
      <el-form-item label="发货方式" v-if="order.orderCommoditys.length > 1">
        <el-radio-group
          v-model="deliver_type"
          :disabled="disabled"
        >
          <el-radio :label="1">整单发货</el-radio>
          <el-radio :label="2">分包裹发货</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="收货人">{{ order.user_real_name }}</el-form-item>
      <el-form-item label="联系电话">{{ order.user_mobile }}</el-form-item>
      <el-form-item label="收货地址">{{ order.address }}</el-form-item>

      <el-form-item prop="express_company" label="选择物流">
        <el-select v-model="order.express_company" filterable placeholder="请选择物流">
          <el-option v-for="item in expressList" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="logistics_no" label="物流单号"><el-input placeholder="请输入物流单号" v-model="order.logistics_no"></el-input></el-form-item>

      <el-form-item label="选择商品" v-if="deliver_type == 2">
        <div class="proSelect">
          <div class="phead">
            <div class="name">商品</div>
            <!-- <div class="store">发货门店</div> -->
            <div class="count">数量</div>
            <div class="status">状态</div>
            <div class="action">操作</div>
          </div>
          <ul>
            <li v-for="(item, i) in order.orderCommoditys" :key="i">
              <div class="pro">
                <vimage style="width: 40px; height: 40px" :src="item.master" fit="fit"></vimage>
                <div class="txt">
                  <span class="mark">{{ item.type == 0 ? '实' : '虚' }}</span>
                  {{ item.name }}
                  <br />
                  {{ item.pvs_value_new }}
                </div>
              </div>
              <!-- <div class="store">
                  <span v-if="item.stores">
                  <el-select :disabled="item.status == '已发货'" v-model="item.store_id" @change="selItem(i)" placeholder="请选择">
                    <el-option
                      v-for="sitem in item.stores"
                      :key="sitem.id"
                      :label="sitem.name + ' - 库存:' + sitem.inventory"
                      :value="sitem.id"
                      :disabled="sitem.inventory == 0 ? true : false">
                    </el-option>
                  </el-select>
                  </span>
                  <span v-else>无需选择</span>
                </div> -->
              <div class="count">X{{ item.count }}</div>
              <div class="status done">{{ item.status }}</div>
              <div class="action">
                <span v-if="item.after_status == '1'">维权中</span>
                <span v-else-if="item.status == '待发货'">
                  <el-button :type="item.isSelected ? 'primary' : ''" :disabled="item.status == '已发货' ? true : false" @click="selectOne(i)">选择</el-button>
                </span>
                <span v-else><el-button :disabled="true">选择</el-button></span>
              </div>
            </li>
          </ul>
        </div>
      </el-form-item>

      <el-form-item><el-button type="primary" @click="saveData">确定发货</el-button></el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getexpress} from '@/api/shop/freight';
import {expressOrder, getOrderStoreList} from '@/api/shop/order';

export default {
  name: 'orderExpress',
  data() {
    return {
      isLoading: false,
      expressList: [],
      disabled:false,
      deliver_type:1,
      itemRules: {
        express_company: [
          {
            required: true,
            message: '请选择物流'
          }
        ],
        logistics_no: [
          {
            required: true,
            message: '请输入单号'
          }
        ]
      }
    };
  },
  props: {
    order: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  created() {



    this.getExpressAll();
    // //处理order商品原始数据
    // this.order.orderCommoditys.forEach(e => {
    //   this.$set(e,'isSelected',false);
    // });

    //获取店铺列表并处理原始数据
    this.getStoreList(this.order.id);
  },
  computed: {
    comm_select_length: function() {
      return this.order.orderCommoditys.filter(_ => _.status == '待发货').length;
    }
  },
  methods: {
    //选择门店自动激活选中当前记录
    selItem(i) {
      this.order.orderCommoditys[i].isSelected = true;
    },
    //获取订单对应商品门店列表
    getStoreList(id) {
      let o = {
        id: id
      };
      this.isLoading = true;
      getOrderStoreList(id)
        .then(res => {
          this.isLoading = false;
          let list = res.msg;
          // 处理order商品原始数据
          let olen= this.order.orderCommoditys.length
          let a = this.order.orderCommoditys.filter(_ => _.status == '待发货'&&_.after_status=='3').length;
          let b = this.order.orderCommoditys.filter(_ => _.status == '待收货').length;
          if (a==olen) {
            //
            this.deliver_type=1
          }
          if(a<olen){
            this.deliver_type=2;
            this.disabled=true

          }
          this.order.orderCommoditys.forEach(e => {
            let x = list.filter(_ => _.commodity_id == e.cid)[0];
            if (x.stores) {
              //门店库存功能
              this.$set(e, 'stores', x.stores);
            } else {
              //没有门店库存功能
              this.$set(e, 'stores', false);
            }
            this.$set(e, 'isSelected', false);
          });
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //获取所有快递
    getExpressAll() {
      this.isLoading = true;
      getexpress().then(res => {
        this.isLoading = false;
        this.expressList = res.msg;
      });
    },
    //选择分包裹发货的商品
    selectOne(i) {
      this.order.orderCommoditys[i].isSelected = !this.order.orderCommoditys[i].isSelected;
    },
    //保存数据(发货)
    saveData() {
      this.$refs.expressForm.validate(valid => {
        if (valid) {
          //封装数据
          // if (!this.deliver_type && this.order.orderCommoditys.length > 1) {
          //   this.$alert('请选择发货方式');
          //   return false;
          // }

          let _data = {};
          _data.id = this.order.id;
          _data.type = this.deliver_type

          _data.logistics_no = this.order.logistics_no;
          _data.express_company = this.order.express_company;
          //如果部分发货,拼接发货的商品
          if (this.deliver_type == 1) {
            //全部发货
            //_data.cids = [];
            _data.status = '3'; //整单发货
          } else if (this.deliver_type == 2) {
            //部分发货
            let l = this.order.orderCommoditys.filter(_ => _.isSelected);
            //校验是否有选择商品
            if (l.length == 0) {
              this.$alert('请选择需要发货的商品');
              return false;
            } //else{
            //校验选择了商品后,对有store列表的商品是否选择了store_id
            // let flag = true;
            // l.forEach(e => {
            //   if(Array.isArray(e.stores) && e.stores.length && e.store_id == null){
            //     flag = false;
            //   };
            // });
            // if(!flag){
            //   this.$alert('请确保出货点是否都已经选择?');
            //   return false;
            // };
            //};

            _data.cids = []; //[1,2,3]
            l.forEach(e => {
              _data.cids.push({
                //commodityId:e.id,
                order_commodity_id: e.order_commodity_id,
                sku_id: e.sku_id,
                store_id: e.store_id
              });
            });
            _data.status = '7'; //整单发货
          }

          //console.log(_data);

          this.isLoading = true;
          expressOrder(_data)
            .then(res => {
              this.isLoading = false;
              this.$emit('success');
            })
            .catch(e => {
              this.isLoading = false;
            });
        } else {
          //console.log('error')
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 15px;
}

//选择商品
.proSelect {
  width: 100%;
  border: 1px solid #dcdfe6;
  //margin-bottom: 10px;

  .phead {
    background: #f4f6f8;
    font-weight: 700;
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdfe6;

    .name {
      flex: 1;
      padding-left: 10px;
    }

    .store {
      width: 180px;
      text-align: center;
    }

    .count {
      width: 80px;
      text-align: center;
    }

    .status {
      width: 80px;
      text-align: center;
    }

    .action {
      width: 100px;
      text-align: center;
    }
  }

  ul {
    margin: 0;
    max-height: 210px;
    overflow-y: auto;

    li {
      display: flex;
      cursor: pointer;
      line-height: 40px;
      padding: 10px 0;
      font-size: 13px;
      border-bottom: 1px solid #dcdfe6;
      padding-left: 10px;

      &:last-child {
        border-bottom: none;
      }

      .pro {
        display: flex;
        flex: 1;

        .txt {
          display: flex;
          padding-left: 10px;
          flex: 1;
          line-height: 18px;
          align-items: center;

          .mark {
            color: #f56c6c;
            background: #f2f4f6;
            display: table;
            border-radius: 5px;
            padding: 0 3px;
            margin-right: 3px;
          }
        }
      }

      .store {
        width: 180px;
        text-align: center;
      }

      .count {
        width: 80px;
        text-align: center;
      }

      .status {
        width: 80px;
        text-align: center;

        &.done {
          color: #67c23a;
        }

        &.none {
          color: #f56c6c;
        }
      }

      .action {
        width: 100px;
        text-align: center;
      }
    }
  }
}

.el-input {
  width: 270px;
}

.box {
  width: 100%;
  /*padding: 60px;
  height: calc(100vh - 77px);
  overflow: scroll;*/
}
</style>
